<template>
    <div>
        <div class="header-abs" v-show="isShow">
            <router-link to="/"> 
                <div class="iconfont back">&#xe624;</div>
            </router-link>
        </div>
        <div class="header-fixed" v-show="!isShow" :style='opacityStyle'>     
             <router-link to="/">     
                <div class="iconfont back">&#xe624;</div>
            </router-link>景点详情
        </div>
    </div>
</template>
<script>
export default {
    name:'Dheader',
    data() {
        return {
            isShow:true,
            opacityStyle:{
                opacity:0
            }
        }
    },
    methods: {
        handleScoll(){
            const scrollTop=document.documentElement.scrollTop
            if(scrollTop>60){
                let opacity=scrollTop/140
                opacity=opacity>1 ?  1 : opacity
                this.opacityStyle={opacity}
                this.isShow=false
            }else{
                this.isShow=true
            } 
        }
    },
    activated() {
        window.addEventListener('scroll',this.handleScoll)
    },
    deactivated() {
        window.removeEventListener('scroll',this.handleScoll)
    },
}
</script>
<style lang="stylus" scoped>
  @import '~styles/varibles.styl'
    .header-abs
        position:absolute
        left:.2rem
        top:.2rem
        height :.6rem
        line-height :.6rem
        width :.6rem
        border-radius :50%
        background:rgba(0,0,0,.7)
        text-align :center
        .back
            color:#ccc
            font-size :.28rem
    .header-fixed
        z-index:2
        height:.86rem
        background-color:$bgColor      
        line-height: $headerHight
        position:fixed
        left:0 
        color:#fff
        top:0
        right:0
        text-align :center
        .back
            position:absolute
            color:#fff
            left:0
            top:0
            width :.64rem
            text-align :center
            font-size : .4rem
</style>